@import "../color-vars.scss";

$padding-top: 30px;
$applet-height: 115px;
$chart-height: calc((100% - $applet-height) / 3);
$left-width: 20%;
.applet {
	top: $padding-top;
	left: 30px;
	width: $left-width;
	height: $applet-height;
	.applet-list {
		padding: 15px;
		.item {
			text-align: center;
			cursor: pointer;
			.icon {
				width: 36px;
				height: 36px;
				margin: auto;
			}
			.text {
				padding-top: 5px;
				color: $sub-title-color;
			}
		}
		.item:hover {
			opacity: 0.7;
			.text {
				color: $primary-color;
			}
		}
	}
}
.device-chart {
	top: 0;
	left: 30px;
	width: $left-width;
	height: 35%;
	padding: 30px 0 15px;
	.content {
		height: 100%;
		.chart {
			height: 100%;
		}
	}
}
.forword-chart {
	top: 35%;
	left: 30px;
	width: $left-width;
	height: 35%;
	padding: 15px 0;
	.content {
		height: 100%;
		.chart {
			height: 100%;
		}
	}
}
.rule-chart {
	top: calc($chart-height * 2 + $applet-height);
	left: 30px;
	width: $left-width;
	height: $chart-height;
	padding: 15px 0;
	.content {
		height: 100%;
		.chart {
			height: 100%;
		}
	}
}
